<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<style>
th{font-weight:500;text-align:left}
</style>
<div class="row">
	<div class="col-sm-12">
					<div class="alert alert-warning">
    					<i class="fa fa-fw fa-warning"></i>
    					<strong>注意:</strong>
    					请选择项目或人员，<span class="label label-danger">默认为不显示任何数据</span>。
    				</div>
		<table class="table table-bordered " style="margin-bottom:2px;margin-top:-18px">
			<thead>
				<tr>
					<th colspan="5"><a class="btn btn-xs btn-warning" href="javascript:void(0);" id="ajax_init_map_area"><i class="fa fa-lg fa-check"></i> 记录当前地图为默认</a> &nbsp;<a class="btn btn-xs btn-success" href="javascript:void(0);" id="ajax_map_all"><i class="fa fa-lg fa-list"></i> 显示所有位置</a>
					</th>
					<th> 查询数量（最大显示1,000条）</th>
					<th style=" width:200px"><span style="text-align:right" class="btn btn-xs btn-warning" id="ajax_map_total"></span></th>
				</tr>
			</thead>
			<tbody>
				<tr>
                    <th>按人员查询</th>
                    <td colspan="3">
                        <select style="width:100%" class="select2 " id="ajax_map_users_selected">
                            <optgroup label="支持过滤查询">
                                <option value="">请选择...</option>
                                <s:iterator value="usersSet" id="list">
                                    <option value="<s:property value="#list.id"/>"><s:property value="#list.name"/></option>
                                </s:iterator>
                            </optgroup>
                        </select>
                    </td>
                    <th>按项目查询</th>
                    <td colspan="2">
                        <select style="width:100%" class="select2 " id="ajax_map_project_selected">
                            <optgroup label="支持过滤查询">
                                <option value="">请选择...</option>
                                <s:iterator value="proInfoSet" id="list">
                                    <option value="<s:property value="#list.id"/>"><s:property value="#list.name"/></option>
                                </s:iterator>
                            </optgroup>
                        </select>
                    </td>
				</tr>
                <tr>
                    <th>
                        日期筛选
                    </th>
                    <td colspan="6">
                        <label class="input"> <i class="icon-prepend fa fa-calendar"></i>
                            <input class="hasDatepicker" type="text"  id="start" placeholder="起始日期">
                        </label>
                        <label class="input"> <i class="icon-prepend fa fa-calendar"></i>
                            <input class="hasDatepicker" type="text"  id="end" placeholder="截止日期">
                        </label>
                    </td>
                </tr>
			</tbody>
		</table>
	</div>
</div>
<!-- rows -->
<div style="width:100%;min-height:500px;border:#ccc solid 1px;" id="dituContent"></div>

<script type="text/javascript">
    // DO NOT REMOVE : GLOBAL FUNCTIONS!
    pageSetUp();

    var styleOptions = {
        strokeColor:"red",    //边线颜色。
        fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
    }

    loadScript("http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js", loadDraw);
    function loadDraw(){
        loadScript("http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js", loadSelect);
    }

    function loadSelect(){
        initMap();//创建和初始化地图


    }
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件

        //addMapControl();//向地图添加控件
        //addMarker();//向地图中添加marker
    }

    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(121.487899,31.249162);//定义一个中心点坐标
        map.centerAndZoom(point,13);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局

        //自适应高宽
        resizeMap();
    }
    $(function(){
        $(window).resize(function(){
            resizeMap();

        });
    });
    $(function(){
        $("#start").datepicker({
            format: 'yyyy-mm-dd',
            weekStart: 1,
            autoclose: true,
            todayBtn: 'linked',
            language: 'zh-CN'
        }).on('changeDate',function(ev){
            var startTime = ev.date.valueOf();
            start = startTime;
            if($("#end").val()!=""){
//                if(end!=0){
//                    if(end<start){
//                        alert("“结束时间 ”不能早于“开始时间 ” ！");
//                        $("#starttime").val("");
//                    }else{
//
//                    }
//                }
            }
            dataSelect();
        });
        $('#end').datepicker({
            format: 'yyyy-mm-dd',
            weekStart: 1,
            autoclose: true,
            todayBtn: 'linked',
            language: 'zh-CN'
        }).on('changeDate',function(ev){
            var endTime = ev.date.valueOf();
            end = endTime;
//            if($("#start").val()!=""){
//                if(end<start){
//                    alert("“结束时间 ”不能早于“开始时间 ” ！");
//                    $("#end").val("");
//                }else{
//
//                }
//            }
            dataSelect();
        });
    });

    $('.hasDatepicker').datetimepicker({
        format: 'yyyy-mm-dd',
        weekStart: 1,
        autoclose: true,
        todayBtn: 'linked',
        language: 'zh-CN',
        minView:2
    });
    function resizeMap(){
        if($('#dituContent').length){
            //屏幕总高度 - 左上角高度
            var totalheight=$(window).height();
            var totalwidth=$(window).width();
            var X = $('#dituContent').offset().top;
            var Y = $('#dituContent').offset().left;
            var nowHeight=totalheight - X;
            var nowWidth = totalwidth -Y - 10;
            // alert("查询:"+qheight+"body:"+$(document.body).height()+"浏览器文档："+$(document).height()+"浏览器:"+$(window).height()+"地图:"+nowHeight+"可见区域:"+document.body.clientHeight);
            $("#dituContent").height(nowHeight);
            $("#dituContent").width(nowWidth);
            //dituContent
        }
    }
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
        map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
//        map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));  //右上角，仅包含平移和缩放按钮
        map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN}));  //左下角，仅包含平移按钮
        map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));  //右下角，仅包含缩放按钮
        map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }

    //标注点数组
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.longitude;
            var p1 = json.latitude;
            var point = new BMap.Point(p0,p1);
            var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point,{icon:iconImg});
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                borderColor:"#808080",
                color:"#333",
                cursor:"pointer"
            });

            (function(){
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;
                _marker.addEventListener("click",function(){
                    this.openInfoWindow(_iw);
                });
                _iw.addEventListener("open",function(){
                    _marker.getLabel().hide();
                })
                _iw.addEventListener("close",function(){
                    _marker.getLabel().show();
                })
                label.addEventListener("click",function(){
                    _marker.openInfoWindow(_iw);
                })
                if(!!json.isOpen){
                    label.hide();
                    _marker.openInfoWindow(_iw);
                }
            })()
        }
    }
    var EXAMPLE_URL = "<%=path%>/resource/main/images/";
    function addMarkers(rows){
        //user_center_address_icon.png

        $(rows).each(function(index,data){
            console.debug(data);
            //标注物品位置
            var goodsIcon = new BMap.Icon(EXAMPLE_URL + "user_center_address_icon.png",{width:36,height:36},{anchor:new BMap.Size(16,16)});
            //w h 图片宽高、l/t 距离左边右边的css值 x lb /距离坐标的定点便宜位置
            goodsIcon = createIcon(data.status == "迟到"?{w:21,h:25,l:66,t:21,x:0,lb:2}:{w:21,h:25,l:22,t:21,x:0,lb:2});
            var goodspoint = new BMap.Point(data.longitude,data.latitude);
            var goodsmarker = new BMap.Marker(goodspoint,{icon:goodsIcon});
            map.addOverlay(goodsmarker);

            goodsmarker.addEventListener("click", function(e) {
                getAddressInfo(this,data);
            });
        })
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t)},{anchor:new BMap.Size(json.x,json.h)})
        return icon;
    }
    function dataSelect(){

        $("#ajax_map_total").html(" 正在努力为您加载，请稍等...");

        var vActionUrl = "<%=path %>/com/ajax-pro-signin!listMap.action";
        var userId=$("#ajax_map_users_selected").val();
        var proInfoId=$("#ajax_map_project_selected").val();
        var start=$("#start").val();
        var end=$("#end").val();
        var data = {
            proInfoId:proInfoId,
            userId:userId,
            start:start,
            end:end
        };
        var text = "";
        ajax_action(vActionUrl,data,null,function(pdata){
            map.clearOverlays();
            map.closeInfoWindow();

            $("#ajax_map_total").html(text + " 共：<b> "+pdata.total +"</b> 条记录");
            addMarkers(pdata.dataRows);
        })
    }


    //获取地址对应的信息
    function getAddressInfo(o,data){
        var sContent =
                "<div style='height:200px;width:400px;'><h4 style='margin:0 0 5px 0;padding:0.2em 0'> <i class='fa fa-fw fa-lg fa-user'></i>" + data.username + "  <i class='fa fa-fw fa-lg fa-clock-o'></i> " +data.time + "  </h4>" +
                "<p style='margin:0;line-height:1.5;font-size:15px;text-indent:2em'> 签到人：<blue>" + data.username+ "</blue></p>" +
                "<p style='margin:0;line-height:1.5;font-size:15px;text-indent:2em'> 项目名称：<blue>" + data.proInfoname + "</blue></p>" +
                "<p style='margin:0;line-height:1.5;font-size:15px;text-indent:2em'> 项目地址：<blue>" + data.address + "</blue></p>" +
                "<p style='margin:0;line-height:1.5;font-size:15px;text-indent:2em'> 签到状态：<blue>" + data.status + "</blue></p>" +

                "<p style='margin:2px;line-height:1.5;font-size:16px;text-indent:2em'> <a href='#ajax-pro-signin!read.action?keyId="+data.id+"' id='focus_"+data.id+"'>  <span class='label  label-warning'>进入签到页面 </span> </a></p>" +
                "</div>";
        var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
        o.openInfoWindow(infoWindow);

    }

    setTimeout(dataSelect,1000);

    $("#ajax_map_users_selected").change(function(){
        dataSelect();
    });
    $("#ajax_map_project_selected").change(function(){
        dataSelect();
    });
    $("#start").change(function(){
        dataSelect();
    });
    $("#end").change(function(){
        dataSelect();
    });
</script>
<script type="text/javascript">
    //设置初始化地址
    $(function(){
        $("#ajax_init_map_area").off("click").on("click",function(){
            var actionUrl = "ajax-users!location.action";
            var center = map.getCenter();
            var data = {latitude:center.lat,longitude:center.lng}
            ajax_action(actionUrl,data,null,function(pdata){
                _show(pdata);
            });
        });
        $("#ajax_map_all").off("click").on("click",function(){
            $("#ajax_map_users_selected").val("");
            $("#start").val("");
            $("#end").val("");
            dataSelect();
        });
    })
</script>
